<route lang="jsonc" type="page">
{
  "layout": "tabbar",
  "style": {
    "navigationBarTitleText": "消息中心"
  }
}
</route>

<script lang="ts" setup>
import { ref } from 'vue'
// import { navigateTo } from 'uni-app'

interface Message {
  id: number
  type: string
  title: string
  content: string
  time: string
  unread: boolean
  sender?: string
}

const messages = ref<Message[]>([
  {
    id: 1,
    type: 'doctor',
    title: '张清北',
    content: '建议先服用药物来控制调理，看看效果怎么样。',
    time: '39分钟前',
    unread: true,
    sender: '张清北'
  },
  {
    id: 2,
    type: 'customer-service',
    title: '优医客服',
    content: '您好，我是优医客服，请问有什么可以帮助您。',
    time: '39分钟前',
    unread: false
  },
  {
    id: 3,
    type: 'transaction',
    title: '交易消息',
    content: '您刚刚购买了张清北医生咨询服务，可随时与...',
    time: '39分钟前',
    unread: false
  },
  {
    id: 4,
    type: 'system',
    title: '系统通知',
    content: '5元咨询优惠券已到账，您可进入【预约-优惠】。',
    time: '39分钟前',
    unread: false
  }
])

const clearUnread = () => {
  messages.value.forEach(msg => {
    msg.unread = false
  })
}

const handleMessageClick = (message: Message) => {
  // 检查是否是优医客服消息
  if (message.type === 'customer-service') {
    // 跳转到客服页面
    uni.navigateTo({
      url: '/pages/customerservice/customerservice'
    })
  }
  // 其他消息类型不执行跳转
}
</script>

<template>
  <view class="message-center">
    <view class="header">
      <text class="title">消息</text>
      <text class="clear-btn" @click="clearUnread">清除未读</text>
    </view>
    
    <view class="message-list">
      <view 
        v-for="message in messages" 
        :key="message.id" 
        class="message-item"
        :class="{ 'unread': message.unread }"
        @click="handleMessageClick(message)"
      >
        <view class="avatar" :class="message.type">
          <text v-if="message.type === 'doctor'">{{ message.sender?.charAt(0) }}</text>
        </view>
        
        <view class="content">
          <view class="top">
            <text class="title">{{ message.title }}</text>
            <text class="time">{{ message.time }}</text>
          </view>
          <text class="message-content">{{ message.content }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.message-center {
  padding: 20rpx 30rpx;
  background-color: #f7f7f7;
  min-height: 100vh;
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .title {
      font-size: 40rpx;
      font-weight: bold;
      color: #333;
    }
    
    .clear-btn {
      font-size: 28rpx;
      color: #999;
    }
  }
  
  .message-list {
    .message-item {
      display: flex;
      padding: 25rpx;
      background-color: #fff;
      border-radius: 12rpx;
      margin-bottom: 20rpx;
      position: relative;
      
      &.unread::after {
        content: '';
        position: absolute;
        right: 25rpx;
        top: 35rpx;
        width: 16rpx;
        height: 16rpx;
        background-color: #f74c31;
        border-radius: 50%;
      }
      
      .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20rpx;
        color: #fff;
        font-size: 36rpx;
        
        &.doctor {
          background-color: #4e8cff;
        }
        
        &.customer-service {
          background-color: #ffb636;
        }
        
        &.transaction {
          background-color: #6ac6b8;
        }
        
        &.system {
          background-color: #a172e3;
        }
      }
      
      .content {
        flex: 1;
        
        .top {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10rpx;
          
          .title {
            font-size: 32rpx;
            color: #333;
            font-weight: bold;
          }
          
          .time {
            font-size: 24rpx;
            color: #999;
          }
        }
        
        .message-content {
          font-size: 28rpx;
          color: #666;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
        }
      }
    }
  }
}
</style>